<template>
	<view class="flex-column-view">
		<view class="top-card">
			<view class="header">
				<image class="img-1" src="https://free.picui.cn/free/2025/10/18/68f30254054ef.png" mode="aspectFill"></image>
				<image class="img-2" src="https://free.picui.cn/free/2025/10/16/68f1059a7f5c7.png" mode="aspectFill"></image>
			</view>
			<view class="content">
				<image class="left-img" src="/src/static/logo.png" mode="aspectFill"></image>
				<view class="right-box">
					<view class="name">
						唯蔓妮丨会员免单节
					</view>
					<view class="tag-row">
						<view class="tag-1">
							<text class="text-1">安心购</text>
							<text class="text-2">透明价</text>
						</view>
						<view class="tag-2">
							<image src="/src/static/order/create/shield-icon.png" mode="aspectFill"></image>
							<text>透明价</text>
						</view>
					</view>
					<view class="desc">
						美丽无套路，价格全透明。限时优惠，手慢拍大腿，赶紧锁定你的专属美丽吧。
					</view>
				</view>
			</view>
		</view>
		<view class="form-box">
			<view class="title-row">
				订单信息
			</view>
			<nut-form label-position="top" star-position="right">
				<nut-form-item label="姓名" required>
					<nut-input
						v-model="form.name"
						class="nut-input-text"
						placeholder="请输入姓名"
						type="text"
						max-length="20"
					/>
				</nut-form-item>
				<nut-form-item label="联系方式" required>
					<nut-input
						v-model="form.age"
						class="nut-input-text"
						placeholder="请输入手机号"
						type="digit"
						max-length="11"
					/>
				</nut-form-item>
				<nut-form-item label="意向门店" required>
					<nut-input
						v-model="form.age"
						class="nut-input-text"
						placeholder="请输入意向门店"
						type="text"
						max-length="50"
					/>
				</nut-form-item>
			</nut-form>
		</view>
		
		<view class="footer-box">
			<view class="price">
				<text class="unit">¥</text>
				<text>399</text>
			</view>
			<nut-button shape="square" type="primary">立即支付</nut-button>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
	name: '',
	age: ''
})
</script>

<style lang="scss" scoped>
	.top-card {
		overflow: hidden;
		margin: 20rpx 20rpx 40rpx;
		border-radius: 40rpx;
		background-color: #fff;
		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			background: linear-gradient(90deg, #FFDBE0 0%, #FFDDC2 100%);
			.img-1 {
				width: 46rpx;
				height: 46rpx;
			}
			.img-2 {
				width: 246rpx;
				height: 70rpx;
			}
		}
		.content {
			display: flex;
			align-items: center;
			gap: 20rpx;
			padding: 34rpx 20rpx;
			.left-img {
				flex-shrink: 0;
				width: 210rpx;
				height: 210rpx;
				border-radius: 30rpx;
			}
			.right-box {
				flex: 1;
				.name {
					font-size: 32rpx;
					font-weight: 700;
					margin-bottom: 20rpx;
				}
				.tag-row {
					display: flex;
					align-items: center;
					gap: 14rpx;
					margin-bottom: 20rpx;
					.tag-1 {
						display: flex;
						align-items: center;
						gap: 6rpx;
						height: 34rpx;
						font-size: 24rpx;
						padding-right: 10rpx;
						border-radius: 10rpx;
						background-color: #F1E2C4;
						.text-1 {
							color: #F7EADC;
							padding: 0 8rpx;
							border-radius: 10rpx;
							background: linear-gradient(90deg, #403930 0%, #5C5246 51.39%, #514538 100%);
						}
						.text-2 {
							color: #442C19;
						}
					}
					.tag-2 {
						margin-left: 22rpx;
						display: flex;
						align-items: center;
						height: 34rpx;
						border-radius: 10rpx;
						background-color: #F1E2C4;
						image {
							width: 44rpx;
							height: 44rpx;
							margin-left: -22rpx;
						}
						text {
							font-size: 24rpx;
							color: #442C19;
						}
					}
				}
				.desc {
					font-size: 24rpx;
					color: #8A8A8A;
				}
			}
		}
	}
	.form-box {
		flex: 1;
		margin: 0 20rpx 64rpx;
		padding: 40rpx 42rpx 0;
		border-radius: 40rpx;
		background-color: #fff;
		.title-row {
			position: relative;
			font-size: 32rpx;
			font-weight: 700;
			padding-left: 34rpx;
			margin: 10rpx 0 30rpx;
			&:before {
				content: '';
				position: absolute;
				left: 16rpx;
				width: 10rpx;
				height: 90%;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 8rpx;
				background-color: #F1E2C4;
			}
		}
		:deep(.nut-cell-group__wrap) {
			box-shadow: none;
		}
		:deep(.nut-form-item) {
			padding-left: 0;
			padding-right: 0;
		}
		:deep(.nut-input__input) {
			height: 104rpx;
			padding: 28rpx 28rpx;
			border-radius: 20rpx;
			background-color: #F6F8FA;
		}
	}
	.footer-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 0 50rpx;
		gap: 40rpx;
		height: calc(96rpx + constant(safe-area-inset-bottom));
		height: calc(96rpx + env(safe-area-inset-bottom));
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		.price {
			font-size: 40rpx;
			font-weight: 700;
			color: #FF3333;
			.unit {
				font-size: 28rpx;
			}
		}
		:deep(.nut-button) {
			width: 272rpx;
			height: 76rpx;
			border-radius: 10rpx;
			background: #F93025 !important;
		}
	}
</style>